<template>
	<div style="position: relative;width: 100%;height: 990px;display: flex;justify-content: space-between;"
		class="pad20">

		<div style="flex: 1;background: #041C62;">
			<div class="textCenter fontBold"
				style="width: 100%;height: 95px;background-size: 100% 100%;font-family: AliHYAiHei;font-weight: 400;font-size: 28px;color: #FFFFFF;line-height: 95px;"
				:style="{'backgroundImage':'url('+require('../../assets/bigScreen/icon40.png')+')'}">
				无废集团建设历程
			</div>
			<div>
				<div v-for="(item,index) in timeline" style="display: flex;" :style="{'marginTop':index > 0?'-25px':''}">
					<div style="flex: 1;"></div>
					<div v-if="index == 0">
						<div style="width: 1px;height: 70px;background: #2E5FB6;"></div>
						<div style="margin-left: -13px;">
							<img src="../../assets/bigScreen/icon42.png" style="width: 55px;height: 27px;" />
						</div>
					</div>
					<div v-else>
						<div style="width: 1px;height: 90px;background: #2E5FB6;"></div>
						<div style="margin-left: -13px;">
							<img src="../../assets/bigScreen/icon42.png" style="width: 55px;height: 27px;" />
						</div>
					</div>

					<div style="flex: 1;margin-left: 10px;" :style="{'marginTop':index > 0?'90px':'75px'}">
						<div style="color: #75E7FF;" class="font18">{{item.projectTime.split(' ')[0]}}</div>
						<div style="color: #FFFFFF;" class="font14 mt5">{{item.projectSummary}}</div>
					</div>
				</div>
			</div>
		</div>
		<div style="flex: 3;" class="ml15">
			<div style="height: 32px;background: linear-gradient(270deg, #041C62, #1649A4);" class="displayFlex">
				<div class="inset-box">实施方案</div>
			</div>

			<div class="mt15" style="display: flex;justify-content: space-between;">
				<div style="width: 302px;height: 900px;background: #041C62;border: 1px solid #1649A4;">
					<div style="width: 176px;height: 158px;background-size: 100%;margin: 20px auto 0;" class="textCenter"
						:style="{'backgroundImage':'url('+require('../../assets/bigScreen/icon43.png')+')'}">
						<div style="font-family: Source Han Sans CN;font-weight: bold;font-size: 24px;color: #FFFFFF;
							background: linear-gradient(180deg, #FFFFFF 0%, #83B7FF 100%);
							-webkit-background-clip: text;-webkit-text-fill-color: transparent;padding-top: 40px;">
							清洁生产
						</div>
					</div>

					<div style="width: 176px;height: 158px;background-size: 100%;margin: 20px auto;" class="textCenter"
						:style="{'backgroundImage':'url('+require('../../assets/bigScreen/icon43.png')+')'}">
						<div style="padding-top: 40px;font-family: Source Han Sans CN;font-weight: bold;
							font-size: 24px;color: #FFFFFF;background: linear-gradient(180deg, #FFFFFF 0%, #83B7FF 100%);
							-webkit-background-clip: text;-webkit-text-fill-color: transparent;">
							减量化
						</div>
					</div>

					<div style="width: 176px;height: 158px;background-size: 100%;margin: 20px auto;" class="textCenter"
						:style="{'backgroundImage':'url('+require('../../assets/bigScreen/icon43.png')+')'}">
						<div style="padding-top: 40px;font-family: Source Han Sans CN;font-weight: bold;font-size: 24px;
							color: #FFFFFF;background: linear-gradient(180deg, #FFFFFF 0%, #83B7FF 100%);
							-webkit-background-clip: text;-webkit-text-fill-color: transparent;">
							无害化
						</div>
					</div>

					<div style="width: 176px;height: 158px;background-size: 100%;margin: 20px auto;" class="textCenter"
						:style="{'backgroundImage':'url('+require('../../assets/bigScreen/icon43.png')+')'}">
						<div style="padding-top: 40px;font-family: Source Han Sans CN;font-weight: bold;font-size: 24px;color: #FFFFFF;
							background: linear-gradient(180deg, #FFFFFF 0%, #83B7FF 100%);
							-webkit-background-clip: text;-webkit-text-fill-color: transparent;">
							资源化
						</div>
					</div>

					<div style="width: 176px;height: 158px;background-size: 100%;margin: 20px auto;" class="textCenter"
						:style="{'backgroundImage':'url('+require('../../assets/bigScreen/icon43.png')+')'}">
						<div style="padding-top: 40px;font-family: Source Han Sans CN;font-weight: bold;font-size: 24px;color: #FFFFFF;
							background: linear-gradient(180deg, #FFFFFF 0%, #83B7FF 100%);
							-webkit-background-clip: text;-webkit-text-fill-color: transparent;">
							信息化
						</div>
					</div>
				</div>

				<div style="width: calc(100% - 302px);" class="ml15">
					<div
						style="width: 100%;height: 171px;background: linear-gradient(0deg, #041452, #041C62);border-top-left-radius: 40px;position: relative;">
						<div v-for="(item,index) in plans[0].contents" :key="index" class="displayFlex" style="padding:20px 0 20px 60px;">
							<img src="../../assets/bigScreen/icon44.png" style="width: 40px;height: 40px;" />
							<div class="ml20">
								<div style="color: #75E7FF;" class="font18">{{item}}</div>
							</div>
						</div>
						<img src="../../assets/bigScreen/icon45.png"
							style="position: absolute;top: 0%;left: 0%;width: 60px;height: 170px;" />
					</div>
					<div class="mt12"
						style="width: 100%;height: 171px;background: linear-gradient(0deg, #041452, #041C62);border-top-left-radius: 40px;position: relative;">
						<div v-for="(item,index) in plans[1].contents" :key="index" class="displayFlex" style="padding:20px 0 20px 60px;">
							<img src="../../assets/bigScreen/icon44.png" style="width: 40px;height: 40px;" />
							<div class="ml20">
								<div style="color: #75E7FF;" class="font18">{{item}}</div>
							</div>
						</div>
						<img src="../../assets/bigScreen/icon45.png"
							style="position: absolute;top: 0%;left: 0%;width: 60px;height: 170px;" />
					</div>
					<div class="mt12"
						style="width: 100%;height: 171px;background: linear-gradient(0deg, #041452, #041C62);border-top-left-radius: 40px;position: relative;">
						<div v-for="(item,index) in plans[2].contents" :key="index" class="displayFlex" style="padding:20px 0 20px 60px;">
							<img src="../../assets/bigScreen/icon44.png" style="width: 40px;height: 40px;" />
							<div class="ml20">
								<div style="color: #75E7FF;" class="font18">{{item}}</div>
							</div>
						</div>
						<img src="../../assets/bigScreen/icon45.png"
							style="position: absolute;top: 0%;left: 0%;width: 60px;height: 170px;" />
					</div>
					<div class="mt12"
						style="width: 100%;height: 171px;background: linear-gradient(0deg, #041452, #041C62);border-top-left-radius: 40px;position: relative;">
						<div v-for="(item,index) in plans[3].contents" :key="index" class="displayFlex" style="padding:20px 0 20px 60px;">
							<img src="../../assets/bigScreen/icon44.png" style="width: 40px;height: 40px;" />
							<div class="ml20">
								<div style="color: #75E7FF;" class="font18">{{item}}</div>
							</div>
						</div>
						<img src="../../assets/bigScreen/icon45.png"
							style="position: absolute;top: 0%;left: 0%;width: 60px;height: 170px;" />
					</div>
					<div class="mt12"
						style="width: 100%;height: 171px;background: linear-gradient(0deg, #041452, #041C62);border-top-left-radius: 40px;position: relative;">
						<div v-for="(item,index) in plans[4].contents" :key="index" class="displayFlex" style="padding:20px 0 20px 60px;">
							<img src="../../assets/bigScreen/icon44.png" style="width: 40px;height: 40px;" />
							<div class="ml20">
								<div style="color: #75E7FF;" class="font18">{{item}}</div>
							</div>
						</div>
						<img src="../../assets/bigScreen/icon45.png"
							style="position: absolute;top: 0%;left: 0%;width: 60px;height: 170px;" />
					</div>
				</div>
			</div>
		</div>
		<img src="../../assets/bigScreen/icon34.png"
			style="width: 665px;height: 392px;position: absolute;top: 0%;left: 0%;" />
		<img src="../../assets/bigScreen/icon37.png"
			style="width: 665px;height: 392px;position: absolute;bottom: 0%;left: 0%;" />
		<img src="../../assets/bigScreen/icon38.png"
			style="width: 665px;height: 392px;position: absolute;top: 0%;right: 0%;" />
		<img src="../../assets/bigScreen/icon39.png"
			style="width: 665px;height: 392px;position: absolute;bottom: 0%;right: 0%;" />
	</div>
</template>

<script>
	let that
	export default {
		name: 'ZeroWasteTimeline',
		data() {
			return {
				timeline: [],
				plans: []
			}
		},

		mounted: function() {
			that = this
			that.getSummaryList()
			that.getDetList()
		},

		methods: {
			getSummaryList() {
				that.ajax({
					url: 'noWaste/project/getSummaryList',
					data: {

					},
					contentType: 'application/x-www-form-urlencoded',
					success: function(res) {
						that.timeline = res.data
					},
				})
			},

			getDetList() {
				that.ajax({
					url: 'noWaste/project/getDetList',
					data: {

					},
					contentType: 'application/x-www-form-urlencoded',
					success: function(res) {
						that.plans = res.data
					},
				})
			},


		}
	}
</script>

<style scoped>
	.inset-box {
		background-image: url('../../assets/bigScreen/icon6.png');
		width: 140px;
		height: 32px;
		line-height: 32px;
		padding-left: 11px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 18px;
		color: #FFFFFF;
	}

	.inset-box::before {
		width: 0px;
		height: 0px;
		position: absolute;
		content: '';
		top: 0px;
		right: 0px;
		border: 5px solid #041C62;
		border-bottom-color: transparent;
		border-left-color: transparent;
	}
</style>